<template>
	<view class="content">
		<nav-top :showType='1' ref="navTop"></nav-top>
		<view class="content-title">
			<view>
				常用功能
			</view>
			<view class="content-title-rt">
				<van-button plain hairline type="primary" size="small" @click="updatePwd">修改密码</van-button>
				<van-button plain hairline type="danger" size="small" @click="loginOut" style="margin-left: 10rpx;">退出登录</van-button>
			</view>
		</view>
		<func-list :funcData="showFuncList" @onClickTo="onClickTo" v-if="flag"></func-list>
		<!-- 添加员工弹窗 -->
		<van-popup v-model:show="showAdd" round :style="{ padding: '20px' }">
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="fromData.oldPassword" name="原密码" label="原密码" placeholder="请输入原密码"
						:rules="[{ required: true, message: '请填写原密码' }]" />
					<van-field v-model="fromData.newPassword" :rules="[{ required: true, message: '请填写原密码' }]" name="新密码" label="新密码" placeholder="请输入新密码" />
				</van-cell-group>
				<div style="margin: 16px;">
					<van-button round block type="primary" native-type="submit">
						确认修改
					</van-button>
				</div>
			</van-form>
		</van-popup>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue'
	import FuncList from '@/components/FuncList.vue'
	import NavTop from '@/components/NavTop.vue'
	import api from '@/api/index.js'
	import $store from "@/store";
	import { onLoad,onShow } from "@dcloudio/uni-app";
	
	export default {
		components: {
			NavTop,
			FuncList
		},
		setup() {
			const data = reactive({
				navTop: null,
				flag: true,
				// 用户信息
				userInfo: { },
				// 当前显示功能列表
				showFuncList: [],
				// 老板功能列表
				bossList: [{
					text: '实时流水',
					icon: '../../static/img/real_time.png',
					path: '/pages/momentBill/momentBill'
				}, {
					text: '每日数据',
					icon: '../../static/img/day.png',
					path: '/pages/dailyFlow/dailyFlow'
				}, {
					text: '每月数据',
					icon: '../../static/img/month.png',
					path: '/pages/monthlyFlow/monthlyFlow'
				}, {
					text: '班次数据',
					icon: '../../static/img/classes.png',
					path: '/pages/shiftData/shiftData'
				}, {
					text: '油价设置',
					icon: '../../static/img/oil_price.png',
					path: '/pages/priceSetting/priceSetting'
				}, {
					text: '员工管理',
					icon: '../../static/img/staff.png',
					path: '/pages/staffManagement/staffManagement'
				}, {
					text: '收款账户',
					icon: '../../static/img/account.png',
					path: '/pages/creditedAccount/creditedAccount'
				}, {
					text: '油枪管理',
					icon: '../../static/img/oil_gun.png',
					path: '/pages/gunControl/gunControl'
				}],
				// 站长功能列表
				principalList: [{
					text: '油价设置',
					icon: '../../static/img/oil_price.png',
					path: '/pages/priceSetting/priceSetting'
				}, {
					text: '班次数据',
					icon: '../../static/img/classes.png',
					path: '/pages/shiftData/shiftData'
				}, {
					text: '实时流水',
					icon: '../../static/img/real_time.png',
					path: '/pages/momentBill/momentBill'
				}, {
					text: '店员管理',
					icon: '../../static/img/clerk.png',
					path: '/pages/shopAssistant/shopAssistant'
				}],
				// 店员功能列表
				staffList: [{
					text: '实时流水',
					icon: '../../static/img/real_time.png',
					path: '/pages/momentBill/momentBill'
				}, {
					text: '班次数据',
					icon: '../../static/img/classes.png',
					path: '/pages/shiftData/shiftData'
				} ],
				list: [],
				fromData: {
					oldPassword: '',
					newPassword: ''
				},
				showAdd: false
			})
			// 初始化数据
			const init = () => {
				data.userInfo = uni.getStorageSync('userInfo')
				if(data.userInfo.roleCode.indexOf('touziren') !== -1 || data.userInfo.roleCode.indexOf('admin') !== -1) {
					data.showFuncList = data.bossList;
					// data.showFuncList = data.principalList;
				}else if(data.userInfo.roleCode.indexOf('zhanzhang') !== -1) {
					data.showFuncList = data.principalList;
					// data.showFuncList = data.bossList;
				}else if(data.userInfo.roleCode.indexOf('yuangong') !== -1) {
					data.showFuncList = data.staffList;
					// data.showFuncList = data.bossList;
				}
			}
			onShow(()=>{
				setTimeout(()=>{
					data.navTop.setArerId()
				})
			})
			const getList = () => {
				// setTimeout(() => {
				// 	$store.commit('setStation',[{
				// 			text: '邵阳宝东加油站',
				// 			value: '1'
				// 		},
				// 		{
				// 			text: '新邵大新石化加油站',
				// 			value: '2'
				// 		}
				// 	]);
				// },500)
				
				// api.list().then(res => {
				// 	$store.commit('setStation',res.data);
				// })
			}
			init();
			getList();
			// 跳转路径
			const onClickTo = (url) => {
				uni.navigateTo({
					url
				})
			}
			const updatePwd = () => {
				data.fromData.oldPassword = ''
				data.fromData.newPassword = ''
				data.showAdd = true
			}
			const onSubmit = () => {
				api.updatePwd({
					oldPassword: data.fromData.oldPassword,
					newPassword: data.fromData.newPassword
				}).then(res => {
					data.showAdd = false
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
				})
			}
			const loginOut = () => {
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('token')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
			return {
				...toRefs(data),
				onClickTo,
				updatePwd,
				onSubmit,
				loginOut
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('@/common/common.less');

	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		.content-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			text-indent: 20rpx;
			margin-top: 20rpx;
		
			.content-title-rt {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				text-align: left;
				margin-right: 40rpx;
		
				text {
					display: block;
					text-indent: 10rpx;
				}
			}
		}
	}
</style>